<template>
  <div class="ctn">
    <span> defineAsyncComponent </span>
    <Suspense>
      <template #default>
        <my-component />
      </template>
      <template #fallback>
        <span> Loading ... </span>
      </template>
    </Suspense>
  </div>
</template>
<script lang="js">
import { defineComponent, defineAsyncComponent } from 'vue'
// 简单用法
// const MyComponent = defineAsyncComponent(
//   () => import("./Hooks.vue")
// );

// with options
const MyComponent = defineAsyncComponent({
  loader: () => import('./Hooks.vue'),
  loadingComponent: (
    <span> loading ... </span>
  ),
  // errorComponent: ErrorComponent,
  delay: 2000,
  timeout: 3000
})

export default defineComponent({
  components: {
    MyComponent
  },
  setup () {
    return {}
  }
})
</script>
